import { Card, Row, Col } from 'antd'
import PropTypes from 'prop-types'
import './index.scss'

const QuickActions = ({ actions }) => {
  return (
    <Card title="快捷操作" style={{ marginTop: 16 }} className="quick-actions-card" bodyStyle={{ padding: '12px 24px' }}>
      <Row gutter={8}>
        {actions.map((action, index) => (
          <Col xs={12} sm={6} key={index}>
            <div className="quick-action-item" onClick={action.onClick}>
              <div className="action-icon" style={{ background: action.color }}>
                {action.icon}
              </div>
              <span>{action.title}</span>
            </div>
          </Col>
        ))}
      </Row>
    </Card>
  )
}

QuickActions.propTypes = {
  actions: PropTypes.arrayOf(
    PropTypes.shape({
      icon: PropTypes.node.isRequired,
      title: PropTypes.string.isRequired,
      color: PropTypes.string.isRequired,
      onClick: PropTypes.func
    })
  ).isRequired
}

export default QuickActions
